<template>
  <div>
    <div style="height: 100%" class="higBox">
      <div :id="id" style="height: 100%"></div>
      <div class="fsa title">
        <div>David</div>
        <div>Nick</div>
        <div>John</div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props: {
      id: {
        type: String,
        required: true,
      },
      dataList: {
        type: Array,
        default: [{
          name: "风速仪",
            value: 90
        }, {
            name: "加速度",
            value: 50
        }, {
            name: "全站仪",
            value: 20
        }]
      },
      color: {
        type: Array,
        default: [
          "#FE5578",
          "#59BCFB",
          "#4dfbff",
          "#1CD1A1"
        ]
      }
    },
    mounted() {
      let mCharts = echarts.init(document.querySelector(`#${this.id}`))
      let data = this.dataList
      let value = data.map((item) => item.value)
      let sum = value.reduce((a, b) => {
        return a + b
      })
      let series = []
      let yAxis = []
      for (let i = 0; i < data.length; i++) {
          series.push({
              name: "",
              type: "pie",
              clockWise: true, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: [45 - i * 10 + "%", 41 - i * 10 + "%"],
              center: ["50%", "50%"],
              label: {
                  show: false
              },
              itemStyle: {
                        borderWidth: 30, //圆柱图宽度
                        borderRadius: 30, //光环宽度
                        borderColor: 'rgba(0, 0,0, 0)',
                        borderDashOffset: 20,
              },
              data: [
                {
                      value: data[i].value,
                      name: data[i].name,
                  },
                  {
                      value: sum - data[i].value,
                      name: "",
                      itemStyle: {
                          color: 'transparent',
                      },
                      hoverAnimation: false
                  }
              ]
          })
      }
      let option = {
          color: this.color,
          // legend: {
          //     show: true,
          //     icon: "none",
          //     top: "50%",
          //     right : "center",
          //     data: name,
          //     width: '500',
          //     // itemGap: 0,
          //     orient:'vertical',
          //     formatter: (name) => {
          //       console.log(name, data)
          //       // return `<span>${}</span>`
          //         return (
          //             "{title|" + name + "}"
          //         );
          //     },
          //     textStyle: {
          //       rich: {
          //         title: {
          //           fontSize: 12,
          //           padding:[0, 0], // 整体偏移label位置
          //           color: "#fff",
          //           backgroundColor: '#0080ff',
          //           borderRadius: 20,
          //         }
          //       }
          //     }
          // },

          grid: {
              top: "26%",
              left: "40%",
              width:"40%",
              height:"21%",
              containLabel: false
          },
          yAxis: [{
              type: "category",
              inverse: true,
              axisLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                  interval: 0,
                  inside: true,
                  textStyle: {
                      color: "#fff",
                      fontSize: 14
                  },
                  show: true
              },
              data: yAxis
          }],
          xAxis: [{
              show: false,
          }],
          series: series
      };

      mCharts.setOption(option)
    }
  }
</script>

<style lang="less" scoped>
  .title{
    color: #fff;
    position: absolute;
    left: 50%;
    width: 100%;
    transform: translate(-50%);
    top: 80%;
    div{
      padding: 12px 30px;
      border-radius: 30px;
      cursor: pointer;
    }
    div:nth-child(1){
      background: #FE5578;
    }
    div:nth-child(2){
      background: #59BCFB;
    }
    div:nth-child(3){
      background: #1CD1A1;
    }
  }
</style>